<template>
    <el-dialog :model-value="show" title="选择商品" @close="emit('hide')">
      <el-input
      v-model="form.keyword"
      placeholder="商品名称搜索"
      class="input-with-select"
      style="width: 300px;"
    >
      <template #append>
        <el-button :icon="Search" @click="queryProductList" />
      </template>
    </el-input>
    <el-table
    ref="multipleTableRef"
    :data="List"
    style="width: 100%"
    border 
    @selection-change="selects"	
    cell-class-name="align-c"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="商品名称" prop="name" />
    <el-table-column label="货号" prop="productSn" >
        <template #default="{row}">
          <div>
            No.{{ row.productSn }}
          </div>
  </template>
</el-table-column>
    <el-table-column label="价格" prop="price" />
  </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="add">确定</el-button>
        </span>
      </template>
      <div class="right">
      <ElConfigProvider :locale="zhCn">
   <div class="">
     <el-pagination v-model:current-page="form.pageNum" v-model:page-size="form.pageSize"
       :page-sizes="[5, 10, 20, 50]" background layout="  prev, pager, next" :total="total"
       @size-change="queryProductList" @current-change="queryProductList" />
   </div>
  </ElConfigProvider>
</div>
    </el-dialog>

  </template>
  <script setup lang="ts">
  import { reactive, ref, watch } from "vue";
  import { ElMessageBox, FormInstance ,ElMessage,ElConfigProvider} from "element-plus";
  import zhCn from 'element-plus/lib/locale/lang/zh-cn'
  import { getProductList,addFlashProductRelationCreate} from "./api";
  import { Search } from '@element-plus/icons-vue'
import { useRoute } from "vue-router";
  // selection
  const route=useRoute()
  // console.log('在添加',route.query);
  // parseInt(route.query.flashPromotionSessionId as string)
  // parseInt(route.query.flashPromotionId as string)
  const needs =ref([])
const selects=(val:any)=>{
  needs.value= val.map((item: { id: any; })=>({
     flashPromotionId:parseInt(route.query.flashPromotionId as string),
    flashPromotionSessionId:parseInt(route.query.flashPromotionSessionId as string),
    productId:item.id
  }))
  
}


  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0
    }
  });
  
  // watch(
  //   () => props.id,
  //   () => {
  //     if (props.id !== 0) {
  //       getFlashSessionById(props.id).then((res) => {
  //         if (res.code === 200) {
  //           Object.assign(form, res.data)
  //         }
  //       });
  //     }else{
  //   formRef.value?.resetFields();
  // }
  //   }
  // );
  // console.log(props.id);
  
  const cancel = ()=>{
    emit("hide");
  }
  
  const emit = defineEmits(["hide"]);
  
  const form = reactive<ProductListParams>({
    brandId:0,//商品品牌编号
    productCategoryId:0,//商品分类编号
    productSn:'',//商品货号
    publishStatus:0,//上架状态
    verifyStatus:0,//审核状态
    keyword: '',
    pageNum: 1,
    pageSize: 5,
    total:0
  });
  

  const total=ref(0)
  const keyword=ref('')
  const formRef = ref<FormInstance>();
    const List = ref<IProductModel[]>([]);
  const queryProductList=()=>{
    getProductList(form).then(res=>{
      if(res.code===200){
        // console.log(res.data);
        
        List.value=res.data.list
        total.value=res.data.total
        keyword.value=res.data.keyword
        
        // console.log(needData.value);
        
      }
    })
  }
  queryProductList()

  const addParams=reactive<EditFlashProductRelation[]>([])

  const add = () => {
    if(needs.value.length>0){
      ElMessageBox.confirm("使用要进行添加操作?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        addFlashProductRelationCreate(needs.value)
        ElMessage.success('添加成功')
        emit("hide", true);
        queryProductList()
      })
      .catch(() => {
  
      });
    }else{
      ElMessage.warning('请选择一条记录')
    }}
  // const submitFn = () => {
  //   formRef.value?.validate((ok: boolean) => {
  //     if (ok) {
  //       add();
  //     } else {
  //     }
  //   });
  // };
  </script>
  <style lang="less" scoped>
  .input-with-select{
    padding-bottom: 20px;
  }
  .right{
    display: flex;
    justify-content: right;
    padding-top: 20px;
  }
  </style>
    